<!--
 * @Descripttion: 
 * @Version: 
 * @Author: gaohj
 * @Date: 2022-11-09 08:50:42
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-11-09 10:21:24
-->

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .header,
        .footer {
            width: 1200px;
            margin: 0 auto;
            background-color: skyblue;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 50px;
            height: 120px;
            color: #fff;
        }

        .footer {
            height: 300px;
        }

        ul,
        li {
            list-style: none;
        }

        ul {
            width: 1200px;
            display: flex;
            flex-wrap: wrap;
            margin: 0 auto;
            justify-content: space-between;
            padding-top: 10px;
        }

        li {
            width: 290px;
            border: 1px solid #333;
            margin-bottom: 10px;
            padding: 5px;
            box-sizing: border-box;
        }

        li>a>img {
            width: 278px;
            display: block;
        }

        .loading {
            width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: center;
            align-items: center;

            display: none;
        }
    </style>
</head>

<body>

    <div class="header">网页头部</div>
    <ul>

    </ul>

    <div class="loading">
        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01e1f35ad46d23a8012040293d688a.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663139598&t=fc70b8c2e4954ae6abe7e0db7657b7ff"
            alt="">
    </div>
    <div class="footer">网页底部</div>

    <script src="./jd.js"></script>
    <script>

        var contentEle = document.querySelector('ul');
        var current = 1;
        var pagesize = 8;
        var total = Math.ceil(arrs.length / pagesize);
        var loadingEle = document.querySelector('.loading');
        var flag = true; //默认是加载下一页的
        function bindHtml() {
            // (当前页面-1)*每页显示的条数   当前页面*每页显示的条数-1 
            var bindList = arrs.slice((current - 1) * pagesize, current * pagesize);
            // [{},{}]
            contentEle.innerHTML += bindList.reduce(function (prev, item) {
                return prev += `
                <li>
                   <a href="${item.detail_url}"><img src="${item.pic_url}" alt=""></a>
                   <p>${item.title}</p>
                   <p>价格:${item.price}</p>
                   <p>销量:${item.sales}</p>
                   <p>更新:${item.data_update}</p>     
                </li>
            `
            }, '');
        }

        bindHtml();

        //找到合适的时机加载下一页 
        // 用户通过滚动条寻找时机 
        // bom事件
        window.onscroll = function(){
            //卷去的高度  
            var scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
            //可视化窗口的高度
            var windowHeight = document.documentElement.clientHeight;

            //ul上方偏移量 
            var ulTop = contentEle.offsetTop;
    
            // ul的占地面积
            var ulHeight = contentEle.offsetHeight;

            // bom scroll 一滚动就触发  
            // 如果滚动  scrolltop+windowHeight <= ulTop+ulHeight 
            // 这个滚动无效  
            // 直到大于才有效  
            if(scrolltop+windowHeight <= ulTop+ulHeight ){
                return 
            }

            if(flag == false){    //表示有定时器已经在执行
                return 
            }

            // 走到这里 说明  scrolltop+windowHeight > ulTop+ulHeight 
            // 该加载了  
            // 让动图显示 
            loadingEle.style.display = 'flex';
            flag = false;  // 到这里加载新的  也就是有定时器执行了
            // 把门关上 下一个定时器等着 
            setTimeout(function(){
                console.log(current,total);
                if(current == total){
                    loadingEle.style.display = 'none';
                    return
                }
                current++;
                bindHtml();
                loadingEle.style.display = 'none';
                flag = true; // 下一个定时器 可以进来了 
            },Math.floor(Math.random()*2000)+1000);
        }
    </script>
</body>

</html>